import { EllipsisOutlined, LeftOutlined, SearchOutlined } from "@ant-design/icons";
import Popup from "../../components/Popup";
import { ApplyType } from "../../components/Apply";
import React, { useContext, useState } from "react";
import { MemberContext } from "../../contexts/Member";
import dayjs from "dayjs";
import Button from "../../components/Button";
import Search from "./Search";


export default function Apply({open = false, onClose}: {
    open: boolean;
    onClose: () => void;
}) {
    const { applies } = useContext(MemberContext);
    const [searching, setSearching] = useState(false);

    let stayDate = '';
    return <>
        <Popup open={open} closeable={false}>
            <div className="flex flex-col h-screen w-screen bg-gray-100">
                <div className="px-4 h-12 flex items-center justify-between border-b bg-white">
                    <div className="text-xl h-12 flex items-center" onClick={onClose}>
                        <LeftOutlined />
                    </div>
                    <div>新的朋友</div>
                    <div className="text-xl h-12 flex items-center">
                        <EllipsisOutlined />
                    </div>
                </div>
                <div className="flex flex-col gap-4">
                    <div className="mx-4 mt-4" onClick={() => setSearching(true)}>
                        <div className="h-9 px-2 border rounded flex gap-2 bg-white items-center justify-center text-gray-500">
                            <div><SearchOutlined /></div>
                            <div>账号/手机号</div>
                        </div>
                    </div>
                    <div className="border-b">
                        {
                            (applies || []).map(
                                (apply) => {
                                    const currentDate = dayjs(apply.createdAt).format('YYYY-MM-DD');
                                    let dateRender = <></>;
                                    if(currentDate !== stayDate) {
                                        dateRender = <><div className="text-gray-500 text-xs px-4 mb-2">{currentDate}</div></>;
                                        stayDate = currentDate;
                                    }
                                    return <React.Fragment key={apply.id}>
                                        {dateRender}
                                        <Single apply={apply} />
                                    </React.Fragment>;
                                }
                            )
                        }
                    </div>
                </div>
            </div>
        </Popup>

        <Search open={searching} onClose={() => setSearching(false)} />
    </>;
}

function Single({apply}: {
    apply: ApplyType;
}) {
    const [loading, setLoading] = useState(false);
    const { id, sender, remark, status } = apply;

    const onAccept = () => {
        if(loading) {
            return;
        }
        setLoading(true);
        window?.socket?.emit('accept', id);
    }

    return <>
        <div className="flex gap-4 p-4 items-center bg-white border-t">
            <div className="flex-1 flex gap-4">
                <div className="w-12 h-12 flex items-center justify-center bg-gray-100 shrink-0">
                    <img src={sender.avatar} alt="user avatar" className="w-full h-full rounded" />
                </div>
                <div className="flex flex-col gap-2">
                    <div className="line-clamp-1">
                        {sender.username}
                    </div>
                    <div className="text-sm text-gray-500">{remark || '想和你成为朋友！'}</div>
                </div>
            </div>
            <Status status={status} loading={loading} onClick={onAccept} />
        </div>
    </>;
}

function Status({status, onClick, loading}: {
    status: number;
    onClick: () => void;
    loading: boolean;
}) {

    switch(status) {
        case 1: {
            return <Button
                className="h-8 w-20 bg-gradient-to-r from-green-500 to-cyan-500 rounded text-white px-4"
                loading={loading}
                disabled={loading}
                onClick={onClick}
            >通过</Button>;
        }
        case 9: {
            return <div className="text-red-500">已拒绝</div>;
        }
        case 10: {
            return <div className="text-green-500">已通过</div>;
        }
    }
    return <></>;
}